<template>
  <div class="max" style="background: url(/static/img/info-bg.png)no-repeat center/cover">
    <my-header>
      <div slot="title">学校简介</div>
    </my-header>
    <div class="cont-nof">
      <div class="shl-basic-info tl">
        <div class="shl-name flex">
          <img :src="school.logo" class="shl-logo" alt="">
          {{school.kindergartenName}}
        </div>
        <div class="shl-tel-address">
          <div class="shl-tel flex">
            <img src="/static/img/phone.png" alt="">
            联系电话：
            <template>
              {{school.phone}}
            </template>
          </div>
          <div class="shl-address flex">
            <img src="/static/img/lxdz.png" alt="">
            联系地址：
            <template>
              {{school.address}}
            </template>
          </div>
        </div>
      </div>
      <div class="shl-img">
        <div class="shl-info">
          <div class="shl-title">校园简介</div>
          <template>
            <div class="shl-info-cont" v-html="school.brief?school.brief:'暂无内容'"></div>
            <my-swiper :list="school.imageList"></my-swiper>
          </template>
        </div>
        <div class="shl-scene">
          <div class="shl-title" style="background-color: rgba(255, 87, 34, 1);">校园风采</div>
          <template>
            <div class="shl-info-cont" v-html="school.kindergartenPhotoDesc?school.kindergartenPhotoDesc:'暂无内容'"></div>
            <my-swiper :list="school.kindergartenPhotoList" :options="swiperOption" :height="100"></my-swiper>
          </template>
        </div>
        <div class="shl-scene">
          <div class="shl-title" style="background-color: rgba(119, 196, 110, 1);">师资力量</div>
          <template>
            <div class="shl-info-cont" v-html="school.teacherPhotoDesc?school.teacherPhotoDesc:'暂无内容'"></div>
            <my-swiper :list="school.teacherPhotoList" :options="swiperOption" :height="100"></my-swiper>
          </template>
        </div>
        <div class="shl-scene">
          <div class="shl-title" style="background-color: rgba(255, 179, 0, 1);">学校荣誉</div>
          <template>
            <div class="shl-info-cont" v-html="school.kindergartenHonorDesc?school.kindergartenHonorDesc:'暂无内容'"></div>
            <my-swiper :list="school.kindergartenHonorList" :options="swiperOption" :height="100"></my-swiper>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mySwiper from '@/page/Myself/kinsfolk/schoolInfo/my-swiper';
  export default {
    components: {
      mySwiper,
    },
    name: "SchoolInfo",
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 5,
        },
        school: {
          imageList: [],
          kindergartenPhotoList: [],
          teacherPhotoList: [],
          kindergartenHonorList: [],
          createTime: "",
          id: 0,
          brief: '',
          teacherPhotoDesc: '',
          kindergartenPhotoDesc: '',
          kindergartenHonorDesc: '',
          kindergartenName: "",
          phone: '',
          address: ''
        },
      }
    },
    methods: {
      fetchSchoolInfo() {
        this.$http.fetchKindergartenShareInfoById({schoolId: this.school.id}).then(resp => {
          this.school = resp.data;
        })
      }
    },
    mounted() {
      this.school.id = this.$route.query.schoolId;
      this.fetchSchoolInfo();
    }
  }
</script>

<style scoped>
  .shl-basic-info,
  .shl-img {
    width: calc(100% - 20px);
    margin: 15px auto 0 auto;
    display: inline-block;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .shl-img {
    padding-bottom: 20px;
  }

  .shl-logo,
  .shl-tel-address img {
    width: 3rem;
    height: 3rem;
    border-radius: 50px;
    margin-right: 10px;
  }

  .shl-tel-address img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .shl-name {
    align-items: center;
    width: 100%;
    height: 5.5rem;
    font-size: 1.6rem;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    margin-bottom: 10px;
  }

  .shl-name img {
    background: #eeeeee;
  }

  .shl-tel-address {
    width: 100%;
    font-size: 1.2rem;
  }

  .shl-tel,
  .shl-address {
    align-items: flex-start;
    padding-bottom: 10px;
    width: 100%;
  }

  .shl-title {
    width: 11.8rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 25px;
    background-color: #36C12D;
    border: 1px solid rgba(255, 255, 255, 0);
    color: #FFFFFF;
    font-size: 1.4rem;
    margin: 15px auto;
  }

  .shl-info-cont {
    width: 100%;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: justify;
  }

  .shl-btns {
    justify-content: space-around;
    margin-bottom: 20px;
    margin-top: 25px;
  }

  .shl-btn {
    width: 140px;
    height: 3.5rem;
    line-height: 3.5rem;
    border-radius: 60px;
    background-color: rgba(244, 248, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
    box-sizing: border-box;
  }

  .btn-forward {
    color: #ffffff;
    background-color: #36C12D;
  }

  .info-textarea {
    height: 200px;
    border: 1px solid rgba(238, 238, 238, 1);
    box-sizing: border-box;
  }
</style>
